import { PageHeader, Tabs, Statistic, Descriptions, Card, Row, Col, Table, Button, message } from 'antd';
import React, { Component } from 'react';
import { Quotationdetail, Quotationsend } from '../../../services/auth';

const { TabPane } = Tabs;
const Content = ({ children, extra }) => (
	<div className="content">
		<div className="main">{children}</div>
		<div className="extra">{extra}</div>
	</div>
);

const columns = [
	{
		title: '产品编号',
		dataIndex: 'goods_id',
		key: 'goods_id',
		align: 'center'
	},
	{
		title: '产品名称',
		dataIndex: 'goods_name',
		key: 'goods_name',
		align: 'center'
	},
	{
		title: '订货数量',
		dataIndex: 'quantity',
		key: 'quantity',
		align: 'center'
	},
	{
		title: '产品定价（件/元）',
		dataIndex: 'price',
		key: 'price',
		align: 'center'
	},
	{
		title: '折扣',
		dataIndex: 'discount',
		key: 'discount',
		align: 'center'
	},
	{
		title: '优惠价（件/元）',
		dataIndex: 'current_price',
		key: 'current_price',
		align: 'center'
	}
];

export default class QuotationDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: {}, //询价单整体
			dataSource: [] //商品列表
		};
	}
	componentDidMount() {
		const { value } = this.props;
		Quotationdetail(value.id).then(
			(response) => {
				response.data.goods.push({
					goods_id: '总计',
					discount: response.data.discount,
					current_price: response.data.total_price
				});
				this.setState({
					data: response.data,
					dataSource: response.data.goods
				});
			},
			(error) => {
				console.log('失败了', error);
			}
		);
	}
	sendConfirm = (id) => {
		Quotationsend(id).then(
			(response) => {
				if (response.data === 'success') {
					message.success('报价单已成功发送');
				} else {
					message.info('提交失败，请重试');
				}
			},
			(error) => {
				console.log('数据获取失败', error);
			}
		);
	};

	render() {
		const { data, dataSource } = this.state;
		return (
			<PageHeader
				className="site-page-header-responsive"
				title={`报价单编号：${data.id}`}
				subTitle={`——询价单编号：${data.inquiry_id ? data.inquiry_id : '无'}`}
				footer={
					<Tabs defaultActiveKey="1">
						<TabPane tab="详情展示" key="1">
							<Card bordered={false}>
								<Table
									dataSource={dataSource}
									columns={columns}
									size="small"
									pagination={false}
									rowKey={(record) => record.goods_id}
									bordered
								/>
							</Card>
						</TabPane>
					</Tabs>
				}
				extra={
					data.status === '待发送' ? (
						<Button
							type="primary"
							onClick={() => {
								this.sendConfirm(data.id);
							}}
						>
							确认发送
						</Button>
					) : (
						<div />
					)
				}
			>
				<Content
					extra={
						<div>
							<br />
							<Card bordered={false} bodyStyle={{paddingLeft:"0px", marginLeft:"-24px",}}>
								<Row gutter={16}>
									<Col span={4}>
										<Statistic title="状态" value={data.status} />
									</Col>
									<Col span={4}>
										<Statistic title="订单折扣" value={`${data.discount}%`} valueStyle={{ color: '#3f8600' }} />
									</Col>
									<Col span={4}>
										<Statistic title="总价" prefix="¥" value={data.total_price} valueStyle={{ color: '#cf1322' }}/>
									</Col>
								</Row>
							</Card>
						</div>
					}
				>
					<Descriptions size="default" column={2} bordered>
						<Descriptions.Item label="询价公司编号" contentStyle={{fontWeight:"bold"}}>{data.company_id}</Descriptions.Item>
						<Descriptions.Item label="询价公司名称" contentStyle={{fontWeight:"bold"}}>{data.company_name}</Descriptions.Item>
						<Descriptions.Item label="操作员编号" contentStyle={{fontWeight:"bold"}}>{data.operator_id}</Descriptions.Item>
						<Descriptions.Item label="操作员名称" contentStyle={{fontWeight:"bold"}}>{data.operator_name}</Descriptions.Item>
						<Descriptions.Item label="报价日期" contentStyle={{fontWeight:"bold"}}>{data.valid_from}</Descriptions.Item>
						<Descriptions.Item label="报价有效期至" contentStyle={{fontWeight:"bold"}}>{data.valid_to}</Descriptions.Item>
						<Descriptions.Item label="预计送达日期" contentStyle={{fontWeight:"bold"}}>{data.req_deliv_date}</Descriptions.Item>
						<Descriptions.Item label="预计送货地点" contentStyle={{fontWeight:"bold"}}>{data.ship_to_address}</Descriptions.Item>
					</Descriptions>
				</Content>
			</PageHeader>
		);
	}
}
